<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/myStrategyComment.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script>
        $(function () {
            //星级评价点击事件(点击星数回显)
            $(".target").click(function () {
                var num = $(this).data("num");
                //每次点击后都样式还原
                backtozero();
                $(".target").each(function (index, item) {
                    //index是从0开始的,不能=
                    if (index < num) {
                        $(item).removeClass("fa-star-o");
                        $(item).addClass("fa-star");
                    }
                })

            })

            //定义全局变量,传递图片框绑定的标识
            var did;
            //图片框点击事件
            $(".rect").click(function () {
                $("[name='file']").click();
                did = $(this).data("did");
            })


            //图片改变事件,提交表单
            $("[name='file']").change(function () {
                var url;
                $("#imgForm").ajaxSubmit(function (data) {
                    url = data.url;
                    //上传后的图片回显
                    $('.rect[data-did="' + did + '"]').html("<img name='uploadimgs' width='100%' src='" + url + "'></img>");
                })
            })

            //评论提交按钮点击事件,提交表单
            $("#submitBtn").click(function () {
                //星星数
                var num = $(".fa-star").length;

                //定义数组接收标签;自定义标签和系统标签放在一起传到后台
                var arrayTags = [];

                //获得选中的系统标签(同时有两个样式)
                var tags = $(".tags-target.active").children();

                tags.each(function (index, ele) {
                    arrayTags[index] = $(ele).val();
                })

                //获得自定义标签
                var myTags = $("[name='myTags']").val();
                var split = myTags.trim().split(/\s+/);

                //先获取系统标签的长度,在此基础上再放到数组里
                var length = arrayTags.length;
                $(split).each(function (index, ele) {
                    arrayTags[length] = ele;
                    length++;
                })

                //获取更多评价内容
                var content = $("[name='content']").val();

                //获取上传图片
                var images = '';
                $("[name='uploadimgs']").each(function (index, ele) {
                    var url = $(ele).attr("src");
                    //避免第一个开始时拼接分号
                    if (images.length == 0) {
                        images += url;
                    } else {
                        images = images + ";" + url;
                    }
                });
                //为末尾拼接;
                images = images + ";";

                var data = {
                    starNum: num,
                    content: content,
                    imgUrls: images,
                    strategyId: getParams().strategyId
                }

                //tag数据拼接
                if (myTags) {
                    console.log(arrayTags);
                    for (var i = 0; i < arrayTags.length; i++) {
                        data["tags[" + i + "].name"] = arrayTags[i].trim();
                    }
                }

                //data是页面所有要提交的数据
                $.post("/strategycomment", data, function (data) {
                    console.log(data);
                    if (data.success) {
                        console.log(data.result.id);
                        window.history.go(-1);
                    }
                })
            })
        })

        //星星样式还原函数
        function backtozero() {
            $(".target").removeClass("fa-star-o");
            $(".target").removeClass("fa-star");
            $(".target").addClass("fa-star-o");
        }
    </script>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">

        <div class="col">
            <a href="javascript:window.history.go(-1)">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>

        </div>
        <div class="col">
            <span>点评</span>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="comment">
    <div class="container star">
        <p>你对该旅游地的评价</p>
        <i class="fa fa-star-o fa-lg target" data-num="1"></i>
        <i class="fa fa-star-o fa-lg target" data-num="2"></i>
        <i class="fa fa-star-o fa-lg target" data-num="3"></i>
        <i class="fa fa-star-o fa-lg target" data-num="4"></i>
        <i class="fa fa-star-o fa-lg target" data-num="5"></i>
    </div>
    <hr/>
    <div class="container tag">
        <p>请为该旅游地选择合适的标签（大家都在评）</p>
        <div class="btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-outline-danger tags-target">
                <input type="checkbox" autocomplete="off" value="价格便宜"> 价格便宜
            </label>
            <label class="btn btn-outline-danger tags-target">
                <input type="checkbox" autocomplete="off" value="住宿方便"> 住宿方便
            </label>
            <label class="btn btn-outline-danger tags-target">
                <input type="checkbox" autocomplete="off" value="旅游景点多"> 旅游景点多
            </label>
            <label class="btn btn-outline-danger tags-target">
                <input type="checkbox" autocomplete="off" value="适合拍照">适合拍照
            </label>
            <label class="btn btn-outline-danger tags-target">
                <input type="checkbox" autocomplete="off" value="吃的很多">吃的很多
            </label>
            <label class="btn btn-outline-danger tags-target">
                <input type="checkbox" autocomplete="off" value="交通不方便">交通不方便
            </label>
        </div>

        <p>添加你自己的标签</p>
        <input name="myTags" class="form-control" placeholder="请使用空格隔开标签，每个标签不超8个字"/>

        <p>更多评价内容</p>
        <textarea name="content" class="form-control" rows="5" placeholder="请填写你对该旅游地的评价"></textarea>
    </div>
    <div class="container imgs ">
        <p>上传图片</p>

        <div class="row">
            <form id="imgForm" method="post" enctype="multipart/form-data" action="/images">
                <input type="file" style="display: none" name="file"/>
            </form>
            <div class="col-3 rect" data-did="1">
                <span>上传</span>
            </div>
            <div class="col-3 rect" data-did="2">
                <span>上传</span>
            </div>
            <div class="col-3 rect" data-did="3">
                <span>上传</span>
            </div>
            <div class="col-3 rect" data-did="4">
                <span>上传</span>
            </div>
            <div class="col-3 rect" data-did="5">
                <span>上传</span>
            </div>
        </div>
    </div>

</div>


<div class="operation">
    <button class="btn" onclick="window.history.go(-1)">放弃评价</button>
    <button class="btn" id="submitBtn">提交评价</button>
</div>


</body>


</html>